<template>
  <div class="big">
    <header>
      <div>
        <img src="../img/jd.png" />
        <span>京东物流</span>
      </div>

      <p>
        <b>年</b>
        <b>月</b>
        <b class="j">日</b>
        <span>2020-09-08</span>
      </p>
    </header>
    <main>
      <div class="left"></div>
      <div class="cnter">
        <div class="a1">
          <img src="../img/logo.png" alt />
          <div class="top">
            <h2>
              <img src="../img/zhuan.png" alt />
              <span>平邑发出</span>
            </h2>
            <p>
              <span>零</span>
              <span>一</span>
              <span>二</span>
              <span>三</span>
              <span>四</span>
              <span>五</span>
              <span>六</span>
              <span>七</span>
            </p>
          </div>
          <div></div>
        </div>
        <div class="gg2" ref="hhhh" style="width:800px;height:400px"></div>
        <div class="a2"></div>
      </div>
      <div class="right"></div>
    </main>
  </div>
</template>
z
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    // this.sgg();
    this.Maps();
    // this.Wuran();
    // this.Si()
  },
  methods: {
    Maps() {
      let myChart = this.$echarts.init(this.$refs.hhhh);
      function randomData() {
        return Math.round(Math.random() * 100);
      }
      var data = [
        {
          name: "齐齐哈尔",
        },
        {
          name: "盐城",
        },
        {
          name: "青岛",
        },
        {
          name: "金昌",
        },
        {
          name: "泉州",
        },
        {
          name: "拉萨",
        },
        {
          name: "上海浦东",
        },
        {
          name: "攀枝花",
        },
        {
          name: "威海",
        },
        {
          name: "承德",
        },
        {
          name: "汕尾",
        },
        {
          name: "克拉玛依",
        },
        {
          name: "重庆市",
        },
        {
          name: "北京市",
        },
      ];

      var geoCoordMap = {
        齐齐哈尔: [123.97, 47.33],
        盐城: [120.13, 33.38],
        青岛: [120.33, 36.07],
        金昌: [102.188043, 38.520089],
        泉州: [118.58, 24.93],
        拉萨: [91.11, 29.97],
        上海浦东: [121.48, 31.22],
        攀枝花: [101.718637, 26.582347],
        威海: [122.1, 37.5],
        承德: [117.93, 40.97],
        汕尾: [115.375279, 22.786211],
        克拉玛依: [84.77, 45.59],
        重庆市: [108.384366, 30.439702],
        北京市: [116.4551, 40.2539],
      };

      var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

      var dataFrom = "北京市";

      myChart.setOption({
        series: [
          {
            type: "map",
            map: "china",
          },
        ],
      });

      var convertData = function (data) {
        var res = [];

        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];

          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }

        return res;
      };

      let option = {
        title: {
          text: "中国大区分布图",
          subtext: "中国的八大区分布",
          itemGap: 30,

          left: "center",
          textStyle: {
            color: "#1a1b4e",

            fontStyle: "normal",

            fontWeight: "bold",

            fontSize: 30,
          },

          subtextStyle: {
            color: "#58d9df",

            fontStyle: "normal",

            fontWeight: "bold",

            fontSize: 16,
          },
        },

        tooltip: {
          trigger: "item",
        },

        visualMap: {
          min: 0,
          max: 100,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          inRange: {
            color: [
              "#ffffff",
              "#E0DAFF",
              "#ADBFFF",
              "#9CB4FF",
              "#6A9DFF",
              "#3889FF",
            ],
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {
              readOnly: false,
            },
            restore: {},
            saveAsImage: {},
          },
        },

        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              color: "#c1c4c8",
            },
            emphasis: {
              show: false,
              color: "#292929",
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#fbfbfb",
              borderColor: "#b9b4b7",
            },
            emphasis: {
              areaColor: "#0df0d8",
            },
          },
        },
        series: [
          {
            name: "北京市",
            type: "lines",
            zlevel: 2,
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              symbol: planePath,
              trailLength: 0,
              symbolSize: 15,
            },
            lineStyle: {
              normal: {
                color: "#c60fff",
                width: 2,
                opacity: 0.5,
                curveness: 0.2,
              },
            },
            data: data.map(function (dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [geoCoordMap[dataFrom], geoCoordMap[dataItem.name]],
              };
            }),
          },
          {
            name: "供需占比",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: 8,
            showEffectOn: "render",
            rippleEffect: {
              scale: 5,
              brushType: "stroke",
            },

            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#c60fff",
                shadowBlur: 20,
                shadowColor: "#333",
              },
            },
          },
          {
            type: "map",
            mapType: "china",
            geoIndex: 0,
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                name: "北京",
                value: randomData(),
              },
              {
                name: "天津",
                value: randomData(),
              },
              {
                name: "上海",
                value: randomData(),
              },
              {
                name: "重庆",
                value: randomData(),
              },
              {
                name: "河北",
                value: randomData(),
              },
              {
                name: "河南",
                value: randomData(),
              },
              {
                name: "云南",
                value: randomData(),
              },
              {
                name: "辽宁",
                value: randomData(),
              },
              {
                name: "黑龙江",
                value: randomData(),
              },
              {
                name: "湖南",
                value: randomData(),
              },
              {
                name: "安徽",
                value: randomData(),
              },
              {
                name: "山东",
                value: randomData(),
              },
              {
                name: "新疆",
                value: randomData(),
              },
              {
                name: "江苏",
                value: randomData(),
              },
              {
                name: "浙江",
                value: randomData(),
              },
              {
                name: "江西",
                value: randomData(),
              },
              {
                name: "湖北",
                value: randomData(),
              },
              {
                name: "广西",
                value: randomData(),
              },
              {
                name: "甘肃",
                value: randomData(),
              },
              {
                name: "山西",
                value: randomData(),
              },
              {
                name: "内蒙古",
                value: randomData(),
              },
              {
                name: "陕西",
                value: randomData(),
              },
              {
                name: "吉林",
                value: randomData(),
              },
              {
                name: "福建",
                value: randomData(),
              },
              {
                name: "贵州",
                value: randomData(),
              },
              {
                name: "广东",
                value: randomData(),
              },
              {
                name: "青海",
                value: randomData(),
              },
              {
                name: "西藏",
                value: randomData(),
              },
              {
                name: "四川",
                value: randomData(),
              },
              {
                name: "宁夏",
                value: randomData(),
              },
              {
                name: "海南",
                value: randomData(),
              },
              {
                name: "台湾",
                value: randomData(),
              },
              {
                name: "香港",
                value: randomData(),
              },
              {
                name: "澳门",
                value: randomData(),
              },
            ],
          },
        ],
      };

      myChart.setOption(option);

      myChart.on("mouseover", function (params) {
        var city = params.name;

        if (city == "广东" || city == "广西" || city == "海南") {
          myChart.dispatchAction({
            type: "highlight",
            name: "广东",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "广西",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "海南",
          });
        }

        if (
          city == "山东" ||
          city == "江苏" ||
          city == "浙江" ||
          city == "安徽" ||
          city == "福建" ||
          city == "上海"
        ) {
          myChart.dispatchAction({
            type: "highlight",
            name: "山东",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "江苏",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "浙江",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "安徽",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "福建",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "上海",
          });
        }

        if (
          city == "湖北" ||
          city == "湖南" ||
          city == "河南" ||
          city == "江西"
        ) {
          myChart.dispatchAction({
            type: "highlight",
            name: "湖北",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "湖南",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "河南",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "江西",
          });
        }

        if (
          city == "北京" ||
          city == "天津" ||
          city == "河北" ||
          city == "山西" ||
          city == "内蒙古"
        ) {
          myChart.dispatchAction({
            type: "highlight",
            name: "北京",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "天津",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "河北",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "山西",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "内蒙古",
          });
        }
        if (
          city == "宁夏" ||
          city == "新疆" ||
          city == "青海" ||
          city == "陕西" ||
          city == "甘肃"
        ) {
          myChart.dispatchAction({
            type: "highlight",
            name: "宁夏",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "新疆",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "青海",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "陕西",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "甘肃",
          });
        }
        if (
          city == "四川" ||
          city == "云南" ||
          city == "贵州" ||
          city == "西藏" ||
          city == "重庆"
        ) {
          myChart.dispatchAction({
            type: "highlight",
            name: "四川",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "云南",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "贵州",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "西藏",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "重庆",
          });
        }
        if (city == "辽宁" || city == "吉林" || city == "黑龙江") {
          myChart.dispatchAction({
            type: "highlight",
            name: "辽宁",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "吉林",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "黑龙江",
          });
        }
        if (city == "台湾" || city == "香港" || city == "澳门") {
          myChart.dispatchAction({
            type: "highlight",
            name: "台湾",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "香港",
          });
          myChart.dispatchAction({
            type: "highlight",
            name: "澳门",
          });
        }
      });

      myChart.on("mouseout", function (params) {
        var city = params.name;

        if (city == "广东" || city == "广西" || city == "海南") {
          myChart.dispatchAction({
            type: "downplay",
            name: "广东",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "广西",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "海南",
          });
        }
        if (
          city == "山东" ||
          city == "江苏" ||
          city == "浙江" ||
          city == "安徽" ||
          city == "福建" ||
          city == "上海"
        ) {
          myChart.dispatchAction({
            type: "downplay",
            name: "山东",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "江苏",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "浙江",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "安徽",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "福建",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "上海",
          });
        }
        if (
          city == "湖北" ||
          city == "湖南" ||
          city == "河南" ||
          city == "江西"
        ) {
          myChart.dispatchAction({
            type: "downplay",
            name: "湖北",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "湖南",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "河南",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "江西",
          });
        }
        if (
          city == "北京" ||
          city == "天津" ||
          city == "河北" ||
          city == "山西" ||
          city == "内蒙古"
        ) {
          myChart.dispatchAction({
            type: "downplay",
            name: "北京",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "天津",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "河北",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "山西",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "内蒙古",
          });
        }
        if (
          city == "宁夏" ||
          city == "新疆" ||
          city == "青海" ||
          city == "陕西" ||
          city == "甘肃"
        ) {
          myChart.dispatchAction({
            type: "downplay",
            name: "宁夏",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "新疆",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "青海",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "陕西",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "甘肃",
          });
        }
        if (
          city == "四川" ||
          city == "云南" ||
          city == "贵州" ||
          city == "西藏" ||
          city == "重庆"
        ) {
          myChart.dispatchAction({
            type: "downplay",
            name: "四川",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "云南",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "贵州",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "西藏",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "重庆",
          });
        }
        if (city == "辽宁" || city == "黑龙江" || city == "吉林") {
          myChart.dispatchAction({
            type: "downplay",
            name: "辽宁",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "黑龙江",
          });
          myChart.dispatchAction({
            type: "downplay",
            name: "吉林",
          });
        }
        if (city == "台湾" || city == "香港" || city == "澳门") {
          myChart.dispatchAction({
            type: "downplay",
            name: "台湾",
          });

          myChart.dispatchAction({
            type: "downplay",
            name: "香港",
          });

          myChart.dispatchAction({
            type: "downplay",
            name: "澳门",
          });
        }
      });
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.big {
  width: 100%;
  height: 100%;
  background-image: url("../img/2.png");
  background-size: 100% 900px;

  header {
    height: 80px;
    ///background: darkorchid;
    align-items: center;
    background-image: url("../img/header.png");
    background-size: 100% 80px;
    display: flex;
    justify-content: space-between;

    p {
      margin-right: 20px;
      color: #fff;
      b {
        display: inline-block;
        height: 30px;
        width: 60px;
        border: 1px solid #ccc;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
        border-radius: 3px;
      }
      .j {
        background: blue;
      }
      span {
      }
    }
  }
  main {
    margin-top: 15px;
    width: 100%;
    height: 700px;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    .left {
      ///background: darkgray;
      width: 480px;
      height: 800px;
    }
    .cnter {
      width: 800px;
      display: flex;
      flex-direction: column;
      .a1 {
        display: flex;
        justify-content: space-between;
        img {
          width: 200px;
        }

        .top {
          margin-left: -50px;
          color: whitesmoke;
          h2 {
            img {
              margin-top: 10px;
              width: 80px;
              margin-left: 30px;
            }
            span {
              position: relative;
              top: -30px;
              left: 15px;
            }
          }
          p{
            width: 300px;
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
    .right {
      width: 480px;
      height: 800px;
      //background: cornflowerblue;
    }
  }
}
</style>